<style lang="less" scoped>
    @import './SidebarMenuSmall.less';
</style>
<template>
    <div class="sidebarsharink">
        <template v-for="(item, index) in menuList">
            <div style="text-align: center;" :key="item.id">
                <Dropdown transfer v-if="item.children.length !== 1" placement="right-start" :key="item.id" @on-click="changeMenu">
                    <Button style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
                        <Icon :size="20" color="#fff"  :type="item.icon"></Icon>
                    </Button>
                    <DropdownMenu style="width: 230px;" slot="list">
                        <template v-for="(child, i) in item.children">
                            <DropdownItem :name="child.path" :key="child.id"><Icon :type="child.icon"></Icon><span style="padding-left:10px;">{{ child.title }}</span></DropdownItem>
                        </template>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown transfer v-else placement="right-start" :key="item.id" @on-click="changeMenu">
                    <Button  style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
                        <Icon :size="20" color="#fff"  :type="item.icon"></Icon>
                    </Button>
                    <DropdownMenu style="width: 230px;" slot="list">
                        <DropdownItem :name="item.children[0].path" :key="'d' + index"><Icon :type="item.icon"></Icon><span style="padding-left:10px;">{{ item.title }}</span></DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </template>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import Cookies from 'js-cookie';
export default {
    inject: ['reload'],
   data(){
    return{
        select_menu:true,
    }
   },
   props:[],
   watch:{
        '$route' (to) {
            // this.$store.commit('current_page_name', to.name);
        }
   },
   computed:mapState(['menuList','pageOpenedList','todos','current_page_name','count']),
   methods:{
       changeMenu(active){
           let routerName = "";
           let params = {};
           if (Cookies.get('cachePage')) {
               let page_count = [];
               page_count = Cookies.get('cachePage');
               page_count=JSON.parse(page_count);
               if (page_count.indexOf(active) == -1) {
                   page_count.unshift(active);
               }
               Cookies.set('cachePage', page_count, { expires: 7 });
           }else{
               let page_count = [];
               page_count.unshift(active);
               Cookies.set('cachePage', page_count, { expires: 7 });
           }
           for (let i = 0; i < this.menuList.length; i++) {
               if(this.menuList[i].children === undefined || this.menuList[i].children.length === 0) {
                   continue;
               }
               if (active == this.menuList[i].children[0].path && this.menuList[i].children.length == 1) {
                   let children =  this.menuList[i].children[0];
                   if (JSON.stringify(this.pageOpenedList).indexOf(JSON.stringify(children)) == -1) {
                       this.pageOpenedList.push(children);
                   }
                   routerName = children.name;
                   params = children.params;
               }else if(this.menuList[i].children.length !=1) {
                   for(let j = 0;j < this.menuList[i].children.length;j++){
                       if(active == this.menuList[i].children[j].path){
                           let children =  this.menuList[i].children[j];
                           if(JSON.stringify(this.pageOpenedList).indexOf(JSON.stringify(children)) == -1){
                               this.pageOpenedList.push(children);
                           }
                           routerName = children.name;
                           params = children.params;
                       }
                   }
               }
           }
           this.$store.commit('pageOpenedList', this.pageOpenedList);
           this.$router.push({
               name: routerName,
               params: params
           });
           this.reload();
       },
       loadReportCategories() {
           this.$axios.get(this.$api.report + "/category",
               {
                   headers: {
                       "Authorization": "Bearer "+this.$sessionStore.fetch(),
                       "Accept": "application/json"
                   },
               }
           ).then(response => {
               if (response.status === 200) {
                   this.$store.commit('updateReportCategory', response.data);
                   this.$store.commit('current_page_name', this.current_page_name);
                   this.$nextTick(()=>{
                       this.$refs.side_menu.updateActiveName();
                   })
               }
           }).catch(error => {
               console.log(error);
           }).finally(() => {

           });
       }
   },
    created() {
       this.loadReportCategories();
    }

};
</script>
